<template>
  <q-btn :dense="isDense" flat no-wrap @click="handleUser">
    <q-icon class="q-mr-xs" color="grey-4" name="account_circle" size="1.65rem"></q-icon>
    {{ `${userInfo.nickName || ''}` }}
    <q-tooltip v-bind="$tooltipAttr">{{ $t('CurrentLogon') }}</q-tooltip>
  </q-btn>
  <q-modal v-model="modalVisible" :header="$t('PersonalInformation')" :loading="loading" :menuBtn="false"
           :persistent="false" class="user-info" width="600" @beforeClose="beforeClose">
    <q-tabs v-model="tabs" :breakpoint="0" active-color="primary" align="left" dense inline-label>
      <q-separator class="absolute-bottom full-width"></q-separator>
      <q-tab class="q-pt-sm q-pb-sm rounded-borders" name="user">{{ $t('SystemCore.BasicInformation') }}</q-tab>
      <q-tab class="q-pt-sm q-pb-sm rounded-borders" name="pwd">{{ $t('SecuritySetup') }}</q-tab>
    </q-tabs>
    <q-tab-panels v-model="tabs" animated class="bg-transparent">
      <q-tab-panel name="user">
        <qx-form ref="userForm" v-model="formInfo" :option="formOption" @submit="submitUser"></qx-form>
      </q-tab-panel>
      <q-tab-panel name="pwd">
        <qx-form ref="pwdForm" v-model="pwdInfo" :option="pwdOption" @submit="submitPWD"></qx-form>
      </q-tab-panel>
    </q-tab-panels>
  </q-modal>
</template>

<script setup>
import { i18n } from 'boot/i18n'
import { postAPI, putAPI } from 'src/api'
import { userStores } from 'src/stores/user-stores'
import { createSuccessMsg, valiEmail, valiPhone } from 'src/utils/utils'
import { computed, inject, ref } from 'vue'

const isDense = inject('isDense', true)

const userStore = userStores()
const tabs = ref('user')
const pwdForm = ref(null)
const loading = ref(false)
const userForm = ref(null)
const modalVisible = ref(false)
const userInfo = computed(() => userStore.userInfo)

const pwdInfo = ref({})
const formInfo = ref({})
const pwdOption = computed(() => {
  return {
    span: 22, menuBtn: true,
    column: [{
      label: `${i18n.t('OldPwd')}`, field: 'oldPassword', type: 'password', required: true
    }, {
      label: `${i18n.t('NewPwd')}`, field: 'newPassword', type: 'password', required: true
    }]
  }
})
const formOption = computed(() => {
  return {
    span: 22, menuBtn: true,
    column: [{
      label: '', field: 'headPic', formslot: true, display: false, value: userInfo.value.headPic
    }, {
      label: `${i18n.t('Account')}`, field: 'loginName', readonly: true, value: userInfo.value.loginName
    }, {
      label: `${i18n.t('SystemCore.Name')}`, field: 'nickName', required: true, value: userInfo.value.nickName
    }, {
      label: `${i18n.t('Mobile')}`, field: 'phonenumber', search: false,
      rules: [val => valiPhone(val) || `${i18n.t('VerifyTip1')}`], value: userInfo.value.phonenumber
    }, {
      label: `${i18n.t('Email')}`, field: 'email', search: false, required: true,
      rules: [val => valiEmail(val) || `${i18n.t('VerifyTip1')}`], value: userInfo.value.email
    }, {
      label: `${i18n.t('Resume')}`, field: 'remark', type: 'textarea',
      maxlength: 200, value: userInfo.value.remark
    }]
  }
})

const initData = () => {
  loading.value = true
  postAPI('/member/api/memberUser/profile/listMyMemberUser', {}, data => {
    userStore.SET_USERINFO(data)
    loading.value = false
  }, () => loading.value = false)
}

const handleUser = () => {
  initData()
  modalVisible.value = true
}

const beforeClose = () => {
  if (pwdForm.value) pwdForm.value.onReset()
  if (userForm.value) userForm.value.onReset()
  modalVisible.value = false
}

const submitUser = (form, done) => {
  form.revision = userInfo.value.revision
  putAPI('/member/api/memberUser/profile/updateMyInfo', form, () => {
    userStore.SET_TOKEN(form)
    createSuccessMsg()
    done()
  }, () => done())
}

const submitPWD = (form, done) => {
  form.revision = userInfo.value.revision
  putAPI('/member/api/memberUser/profile/updateMyPassword', form, data => {
    userStore.SET_TOKEN(data)
    if (pwdForm.value) pwdForm.value.onReset()
    initData()
    done()
  }, () => done())
}
</script>